<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.id ? '新增内容' : '修改内容'"
    width="70%"
    @close="onClose"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRules"
      label-width="120px"
    >
      <el-form-item
        label="内容标题"
        prop="title"
      >
        <el-input
          v-model="dataForm.title"
          placeholder="请输入内容标题"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item
        label="所属课程"
        prop="courseId"
      >
        <el-select
          v-model="dataForm.courseId"
          placeholder="请选择所属课程"
          :disabled="isReadOnly"
        >
          <el-option
            v-for="item in courseList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="内容类型"
        prop="contentType"
      >
        <el-select
          v-model="dataForm.contentType"
          placeholder="请选择内容类型"
          :disabled="isReadOnly"
        >
          <el-option
            label="视频"
            :value="1"
          />
          <el-option
            label="文档"
            :value="2"
          />
          <el-option
            label="图片"
            :value="3"
          />
          <el-option
            label="音频"
            :value="4"
          />
          <el-option
            label="其他"
            :value="5"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="时长(分钟)"
        prop="duration"
      >
        <el-input-number
          v-model="dataForm.duration"
          :min="0"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item
        label="内容描述"
        prop="description"
      >
        <el-input
          v-model="dataForm.description"
          type="textarea"
          rows="4"
          placeholder="请输入内容描述"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item
        label="内容URL"
        prop="contentUrl"
      >
        <el-input
          v-model="dataForm.contentUrl"
          placeholder="请输入内容URL"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort"
      >
        <el-input-number
          v-model="dataForm.sort"
          :min="0"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item
        label="状态"
        prop="status"
      >
        <el-select
          v-model="dataForm.status"
          placeholder="请选择状态"
          :disabled="isReadOnly"
        >
          <el-option
            label="草稿"
            :value="0"
          />
          <el-option
            label="已发布"
            :value="1"
          />
          <el-option
            label="已下架"
            :value="2"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button
          v-if="!isReadOnly"
          type="primary"
          @click="onSubmit"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const props = defineProps({
  courseList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['refresh-data-list', 'close'])

const visible = ref(false)
const isReadOnly = ref(false)
const dataFormRef = ref(null)

const dataForm = ref({
  id: '',
  title: '',
  courseId: '',
  contentType: 1,
  duration: 0,
  description: '',
  contentUrl: '',
  sort: 0,
  status: 0
})

const dataRules = {
  title: [
    { required: true, message: '内容标题不能为空', trigger: 'blur' }
  ],
  courseId: [
    { required: true, message: '所属课程不能为空', trigger: 'change' }
  ],
  contentType: [
    { required: true, message: '内容类型不能为空', trigger: 'change' }
  ]
}

/**
 * 初始化
 */
const init = (id, readOnly = false) => {
  visible.value = true
  isReadOnly.value = readOnly
  dataForm.value.id = ''
  dataForm.value.title = ''
  dataForm.value.courseId = ''
  dataForm.value.contentType = 1
  dataForm.value.duration = 0
  dataForm.value.description = ''
  dataForm.value.contentUrl = ''
  dataForm.value.sort = 0
  dataForm.value.status = 0

  if (id) {
    getInfo(id)
  }
}

/**
 * 获取信息
 */
const getInfo = (id) => {
  http({
    url: http.adornUrl(`/admin/courseContent/info/${id}`),
    method: 'get'
  })
    .then(({ data }) => {
      dataForm.value = data
    })
}

/**
 * 提交
 */
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      return false
    }

    const url = dataForm.value.id ? '/admin/courseContent/update' : '/admin/courseContent/add'
    const method = dataForm.value.id ? 'put' : 'post'

    http({
      url: http.adornUrl(url),
      method: method,
      data: http.adornData(dataForm.value)
    })
      .then(() => {
        ElMessage({
          message: dataForm.value.id ? '修改成功' : '新增成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refresh-data-list')
          }
        })
      })
  })
}

/**
 * 关闭
 */
const onClose = () => {
  visible.value = false
  emit('close')
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
// 样式定义
</style>

